<template>
    <div class="rf-cards-scroller">
        <div class="rf-cards-scroller-crop">
            <div class="rf-cards-scroller-overflow">
                <div class="rf-cards-scroller-platter">
                    <template v-for="(topItem, index) in list" :key="index">
                        <div class="rf-cards-scroller-item">
                            <div class="content">
                                <p style="margin: 0;">探索18GAME</p>
                                <h3 style="margin: 0;margin-top: 5px;font-weight: 560;margin-bottom: 20px;">
                                    最受欢迎的中文游戏
                                </h3>
                                <template v-for="(item, subIndex) in topItem" :key="subIndex">
                                    <div class="gameInfoItem">
                                        <div class="gameIndex">
                                            <span class="gameIndexNum">{{ subIndex + 1 }}</span>
                                        </div>
                                        <div class="gameLogo">
                                            <image-box :src="item.cover" alt=""></image-box>
                                        </div>
                                        <div class="gameInfo">
                                            <h3 class="gameName">
                                                {{ item.name }}
                                            </h3>
                                            <p class="gameDesc">
                                                {{ item.subtitle }}
                                            </p>
                                            <p class="systemLogo">
                                                <span v-for="(os,oIndex) in (item.os?item.os.split(','):[])" :key="oIndex" :class="`slogo ${os}`"></span>
                                            </p>
                                        </div>
                                        <div class="gameDownload">
                                            <div class="download-button">
                                                下载
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <div class="showMore">
            <div class="showMoreText" @click="linkTo('/gameLib')">
                - 查看更多 -
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {axiosService} from '@http'
import {useRouter} from 'vue-router'

export interface GameListInterface {
    items: GameListItemInterface[]
    total_items: number
    limit: number
    first: number
    previous: number
    current: number
    next: number
    last: number
}

export interface GameListItemInterface {
    id: number
    subtitle: string
    cover: string
    name: string
    download_url: any
    os: string
}

const Router = useRouter()
const linkTo = (path: string) => {
    Router.push(path)
}

const getGameList=(page:number)=>{
    return axiosService.post<GameListInterface>('/api/Index/gameList',{page})
}

const list = ref<GameListItemInterface[]>([])

const getGameListFun= async()=>{
    const item1=await getGameList(1)
    list.value[0]=item1.data.items
    const item2=await getGameList(2)
    list.value[1]=item2.data.items
    const item3=await getGameList(3)
    list.value[2]=item3.data.items

}


getGameListFun()


</script>

<style lang="scss" scoped>
.rf-cards-scroller {
    position: relative;
    padding-bottom: 30px;
    color: #fff;

    .rf-cards-scroller-crop {
        overflow: hidden;
        padding-bottom: 38px;
        height: 560px;

        .rf-cards-scroller-overflow {
            flex-wrap: nowrap;
            display: flex;
            overflow-x: auto;
            flex-direction: row;

            .rf-cards-scroller-platter {
                display: inline-flex;
                padding-bottom: 40px;
                padding-top: 25px;
                vertical-align: top;
                width: 100%;
                padding-left: 20px;

                .rf-cards-scroller-item {
                    display: flex;
                    flex-direction: row;
                    height: 560px;
                    border-radius: 10px;
                    margin-right: 15px;
                    background: url('../../../assets/bg1.png') no-repeat top;
                    background-size: 350px;
                    // border: 1px solid #fff;

                    .content {
                        padding: 10px;
                        width: 350px;
                    }
                }
            }
        }

    }
}

.gameInfoItem {
    display: flex;
    margin-bottom: 10px;
    .gameIndex {
        width: 15px;
        text-align: center;
        font-weight: bold;
        flex-grow: 0;
        display: flex;
        align-items: center;
    }

    .gameDownload {
        flex-grow: 0;
        display: flex;
        align-items: center;

        .download-button {
            width: 80px;
            text-align: center;
            height: 24px;
            // margin: 69px 0 1px 111px;
            // padding: 15.5px 85.9px 16.5px 85.1px;
            object-fit: contain;
            border-radius: 37px;
            font-size: 13px;
            background-color: #eb49a8;
        }
    }

    .gameLogo {
        width: 80px;
        height: 80px;
        flex-grow: 0;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        margin-bottom: 2px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .gameInfo {
        flex-grow: 1;
        display: flex;
        align-items: start;
        flex-direction: column;
        font-size: 13px;
        padding-left: 10px;

        .gameName {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 120px;
        }

        .gameDesc {
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 120px;
        }

        .systemLogo {
            .slogo {
                display: inline-block;
                width: 13px;
                height: 13px;
                // background-color: #eb49a8;
                margin-right: 5px;

                &.iOS {
                    background: url('../../../assets/apple-logo.png') no-repeat center;
                    background-size: contain;
                }

                &.Android {
                    background: url('../../../assets/anzhuo-logo.png') no-repeat center;
                    background-size: contain;
                }

                &.Windows {
                    background: url('../../../assets/windows-icon.png') no-repeat center;
                    background-size: contain;
                }

                &.Mac {
                    background: url('../../../assets/Mac-icon.png') no-repeat center;
                    background-size: contain;
                }
            }
        }
    }
}


.showMore {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 20px;

        .showMoreText {
            font-size: 13px;
            width: 240px;
            height: 35px;
            color: #fff;
            line-height: 35px;
            border-radius: 20px;
            text-align: center;
            border: 1px solid #fff;
        }
    }
</style>
